import React, { useState } from 'react'
import { Sticky, NavBar, Toast, Stepper, Button } from 'react-vant'
import { ArrowLeft } from '@react-vant/icons';
import '../../css/jly/OrdersOne.css'
import { Price } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { useNavigate } from 'react-router-dom';
export default function OrdersOne() {
    const navigate = useNavigate()
    //步进器
    const [value8, setValue8] = useState(1);
    //动态样式
    const [listOne, setListOne] = useState(['10.31', '11.01', '11.02'])
    const [styleOne, setStyleOne] = useState('10.31')

    const [listTwo, setListTwo] = useState([{ id: 1, name: 'C级票', price: 200 }, { id: 2, name: 'B级票', price: 400 }, { id: 3, name: 'A级票', price: 800 }])
    const [styleTwo, setStyleTwo] = useState('C级票')

    const [listThree, setListThree] = useState(['快递配送', '现场取票'])
    const [styleThree, setStyleThree] = useState('快递配送')


    //计算价格
    let [price, setPrice] = useState(200)
    let pricecount = (item) => {
        setStyleTwo(item.name)
        setPrice(item.price)

    }

    //跳转orderstwo
    let navigateOrdersTwo = () => {
        localStorage.setItem('data', JSON.stringify(
            {
                date: styleOne,
                cate: styleTwo,
                price: price * value8,
                host: styleThree,
                num: value8
            }))
        navigate('/orderstwo')

    }
    return (
        <div className='OrdersOne'>
            <Sticky>
                <NavBar
                    title="舞台剧东野圭吾【虚无的十字架】"
                    leftText={<ArrowLeft />}
                    onClickLeft={() => Toast('返回')}
                />
            </Sticky>
            {/* 日期 */}
            <div className='O_topOne'>
                <div className='O_topOne_top'>
                    日期
                </div>
                <div className='O_topOne_bottom'>
                    {
                        listOne.map((item, index) => (
                            <div
                                className={item === styleOne ? 'active' : 'O_topOne_bottom_item'}
                                onClick={() => { setStyleOne(item) }}
                                key={index}
                            >{item}日</div>
                        ))
                    }
                </div>
            </div>





            {/* 票面 */}
            <div className='O_topOne'>
                <div className='O_topOne_top'>
                    票面
                </div>
                <div className='O_topOne_bottom'>
                    {
                        listTwo.map(item => (
                            <div
                                className={item.name === styleTwo ? 'active' : 'O_topOne_bottom_item'}
                                onClick={() => { pricecount(item) }}
                                key={item.id}
                            >{item.name}&nbsp;{item.price}</div>
                        ))
                    }
                </div>
            </div>




            {/* 数量 */}
            <div className='O_topThree'>
                <div className='O_topThree_top'>
                    数量
                </div>
                <div className='O_topThree_bottom'>
                    <Stepper
                        value={value8}
                        onChange={val => setValue8(val)}
                        theme='round'
                        buttonSize='22'
                        disableInput
                        max={6}
                        min={1}
                    />
                    <span>每单限购6张</span>
                </div>
            </div>




            {/* 配送方式 */}
            <div className='O_topFour'>
                <div className='O_topFour_top'>
                    配送方式
                </div>
                <div className='O_topFour_bottom'>
                    {
                        listThree.map((item, index) => (
                            <div
                                className={item === styleThree ? 'active2' : 'O_topFour_bottom_item'}
                                onClick={() => { setStyleThree(item) }}
                                key={index}
                            >
                                {item}
                            </div>
                        ))
                    }
                    {/* <div className={item === styleTwo ? 'active' : 'O_topOne_bottom_item'} onClick={()=>{setStyleThree(1)}}>
                        快递配送
                    </div>
                    <div  className={item === styleTwo ? 'active' : 'O_topOne_bottom_item'} onClick={()=>{setStyleThree(2)}}>
                        现场取票
                    </div> */}
                </div>
            </div>


            {/* 底部 */}
            <Sticky position='bottom' offsetBottom={0}>
                <div className='O_bottom'>
                    <div className='O_bottom_left'>
                        <span>合计： <Price price={price * value8} size="large" thousands /></span>
                    </div>
                    <div className='O_bottom_right'>
                        <Button type='danger' style={{ width: '100%' }} onClick={() => { navigateOrdersTwo() }}>确定</Button>
                    </div>
                </div>
            </Sticky>

        </div>
    )
}
